import { useEffect, useRef, useState } from "react";
// import styles from "./DirectoryChooser.module.css";
// export const DirectoryChooser = (props: {
//   choose: (val: () => void) => void;
//   type: "file" | "dir";
//   onChange: (fileList: FileList, path: string) => void;
// }): JSX.Element => {
//   const input = useRef(null);

//   useEffect(() => {
//     props.choose(() => {
//       if (!input) return;
//       input.current.click();
//     });
//   }, []);
//   return (
//     <>
//       {props.type === "dir" ? (
//         <input
//           type="file"
//           id="uploadInput"
//           ref={input}
//           webkitdirectory="true"
//           className={styles.uploadTrigger}
//           onChange={(e) => {
//             console.log(e, "change");

//             let path = "";
//             if (e.target.files.length) {
//               const ele = e.target.files[0];
//               const relativePath = ele.webkitRelativePath.substring(
//                 0,
//                 ele.webkitRelativePath.lastIndexOf("/")
//               );
//               path = ele.path.substring(
//                 0,
//                 ele.path.lastIndexOf(relativePath) + relativePath.length
//               );
//             }

//             props.onChange(e.target.files, path);
//           }}
//         />
//       ) : (
//         <input
//           type="file"
//           ref={input}
//           className={styles.uploadTrigger}
//           onChange={(e) => {
//             console.log(e.target.files);
//           }}
//         />
//       )}
//     </>
//   );
// };

export type FileSelectorType = {
  emit: boolean;
  type: "file" | "dir";
  callBack: (path: string, fileList: FileList) => void;
};

export const FileSelector = (props: { upload: FileSelectorType }) => {
  useEffect(() => {
    const input = document.createElement("input");
    input.setAttribute("id", "fileSelector");
    const isDir = props.upload.type === "dir";
    isDir && input.setAttribute("webkitdirectory", "true");
    input.setAttribute("multiple", "true");
    input.setAttribute("type", "file");
    // input.setAttribute("style", "width: 0px;");
    input.addEventListener("change", (e) => {
      const target = e.target as HTMLInputElement;
      let path = "";
      if (target.files.length) {
        const ele = target.files[0];
        if (isDir) {
          path = ele.path.substring(
            0,
            ele.path.length -
              ele.webkitRelativePath.substring(
                ele.webkitRelativePath.indexOf("/"),
                ele.webkitRelativePath.length
              ).length
          );
        } else {
          path = ele.path.substring(0, ele.path.length - ele.name.length);
        }
      }

      props.upload.callBack(path, target.files);
    });
    document.getElementById("uploadInputBox").append(input);
    input.click();

    return () => {
      document.getElementById("uploadInputBox").removeChild(input);
    };
  }, [props.upload.emit]);
  return (
    <div id="uploadInputBox" style={{ width: 0, height: 0, opacity: 0 }}></div>
  );
};
